<template>
  <div style="height: 400px; width: 600px">
    <baidu-map class="map" :center="{lng: lng, lat: lat}" :zoom="zoom" @click="getClickInfo" :scroll-wheel-zoom="true" >


    </baidu-map>
  </div>
</template>

<script>
  export default {
    name: "Map",
    props:{
      lonAndLat:{
        type:String,
        default:''

      }
    },
    data() {
      return {
        map: null,
        marker: null,
        position: null,
        markers:[],
        address:'',
        lng: 125.3247893,
        lat: 43.8868593,
        zoom:17
      }
    },
    watch:{
      lonAndLat: {
        handler(newName, oldName) {
          if(newName !=''){
            let newList=newName.split(',')
            this.lng=newList[0]
            this.lat=newList[1]}


        },
        immediate: true
      }
    },
    methods: {
      /***
       * 地图点击事件、定位图标拖拽移动事件
       */
      getClickInfo(e) {
        console.log('e',e)
        let that = this
       // const position = { id: Math.random() * 40, lng: e.point.lng, lat: e.point.lat }
        let long = e.point.lng
        let lat = e.point.lat
        let LngLat = long + ',' + lat
        //that.position = e.point
        let geoc = new BMap.Geocoder();
        geoc.getLocation(e.point, function(rs) {
          console.log("---"+JSON.stringify(rs))

          that.address = rs.address
          that.$emit('setAddress', that.address + '-' + LngLat)
        });

      },
      init() {
        var that = this
        this.map = new AMap.Map(this.$el, {
          center: [125.323643,43.816996],
          zoom: 14
        })
        this.geocoder = new AMap.Geocoder()
        this.map.on('click', function (e) {
          var long = e.lnglat.getLng()
          var lat = e.lnglat.getLat()
          var LngLat = long + ',' + lat
          if (that.marker) that.map.remove(that.marker)
          that.marker = new AMap.Marker({
            position: [long, lat]
          })
          that.marker.setMap(that.map)
          that.geocoder.getAddress([long, lat], function (status, result) {
            if (status === 'complete' && result.regeocode) {
              that.$emit('setAddress', result.regeocode.formattedAddress + '-' + LngLat)
            }
          })
        })
      }
    },
    mounted() {
    //  this.init()
    }
  }
</script>

<style lang="scss" scoped>
  .map{width: 100%; height: 100%}
</style>
